<template>
  <div>
    <div class="box">
      <img :src="dogUrl" alt="" />
      <p  @click="changeFn" :style="{backgroundColor: color}">{{ dogName }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props:['dogUrl','dogName'],
  data() {
    return {
      color:''
    };
  },
  methods:{
    changeFn(){
      this.color = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`
    }
  }
};
</script>

<style scoped>
.box {
  width: 100px;
  height: 200px;
  border: 1px solid #000;
  float: left;
  text-align: center;
}
.box img {
  width: 100%;
  height: 150px;
  
}
</style>
